<template>
  <div>
    <div class="left-col">{{ name || '您已选择：' }}</div>
    <div class="right-col filter-list-wrapper condition-wrapper">
      <ul class="filter-list">
        <li v-for="(item, index) in list" :key="index">
          <span>{{ item.name }}</span> <span>{{ formateCondition(item) }}</span>
          <i @click="onClick(item)" class="el-icon-close"></i>
        </li>
        <li class="clear-all" @click="onClick">清空筛选</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: ['name', 'list'],
  data() {
    return { inputVal: '' };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.inputVal = val;
        }
      },
      immediate: true
    }
  },
  methods: {
    onClick(item) {
      this.$emit('onRemove', item && item.id);
    },
    formatDate(date, format) {
      if (!date) {
        return;
      }
      var o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds(),
        'q+': Math.floor((date.getMonth() + 3) / 3),
        S: date.getMilliseconds()
      };
      if (/(y+)/.test(format))
        format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      for (var k in o)
        if (new RegExp('(' + k + ')').test(format))
          format = format.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
          );
      return format;
    },
    formateCondition(item) {
      switch (item.type) {
        case 'select':
          return item.label;
        case 'multiSelect':
          return (item.children || [])
            .map(child => {
              return child.label;
            })
            .join('、');
        case 'text':
          return item.value;
        case 'date':
          if (item.dateType === 'datetimerange' && item.value && item.value.length === 2) {
            return (
              this.formatDate(item.value[0], 'yyyy-MM-dd hh:mm:ss') +
              ' ~ ' +
              this.formatDate(item.value[1], 'yyyy-MM-dd hh:mm:ss')
            );
          } else if (item.dateType === 'daterange' && item.value && item.value.length === 2) {
            return (
              this.formatDate(item.value[0], 'yyyy-MM-dd') +
              ' ~ ' +
              this.formatDate(item.value[1], 'yyyy-MM-dd')
            );
          } else if (item.dateType === 'date' && item.value) {
            return this.formatDate(item.value, 'yyyy-MM-dd');
          }
          return '日期格式错误';
        case 'group':
          return Object.keys(item.children)
            .map(key => {
              return (item.children[key] || [])
                .map(subItem => {
                  return subItem.label;
                })
                .join('、');
            })
            .join(' | ');
      }
      return '';
    }
  }
};
</script>
<style>
.selected-condition-list {
  display: block;
  list-style: none;
  text-align: left;
  padding: 0;
  margin: 0;
}
.selected-condition-list li {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
  background: #e5eaf0;
}
</style>
